<template>
  <div class="hotbox-container">
    <div class="hot-bg">
      <div class="bg"></div>
    </div>

    <div class="swiper-hot" >
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="item in cartlist" :key="item.id">
          <div class="hot-main">
            <div class="img-box">
              <img :src="item.albums[0]" alt="">
            </div>
            <div class="text">
              <h4>{{item.title}}</h4>
              <van-rate v-model="item.value" icon="like" void-icon="like-o" />
              <div class="dec">
                <i>分类：</i> {{item.tags}}
              </div>
              <div class="btn-grout">
                <van-button type="info" hairline size="small" @click="like(item.title)"> <i class="iconfont iconxihuan" ></i> 收藏</van-button>
                <van-button type="danger" hairline size="small" @click="goArticle(item.id)">查看完整食谱</van-button>
              </div>
            </div>
          </div>
        </div>

      </div>
      <!-- Add Pagination -->
      <div class="swiper-pagination"></div>
    </div>
  </div>
</template>

<script>
  import Swiper from 'swiper';
import { Toast } from 'vant';
  export default {
    data() {
      return {
        cartlist: [],
        value: 2.5
      }
    },
    updated() {
      new Swiper('.swiper-hot', {
        slidesPerView: 1,
        centeredSlides: true,
        spaceBetween: 30,
        loop: false,
        autoplay: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
      })
    },
    created() {
      this.Getcartlist();
    },
    methods: {
      Getcartlist() {
        this.$http.get("json/cart/cart-list.json").then(result => {
          if (result.body.resultcode == 200) {
            this.cartlist = result.body.result.data;
            this.cartlist = this.cartlist.slice(0, 10);
            this.cartlist.forEach(item => {
              item.value = Math.ceil(Math.random() * 5)
            })
          } else {
            Toast("数据加载失败");
          }
        });
      },
        goArticle(id){
        this.$router.push('/cart/article/'+id)
      },
      like(title){
            Toast(`已经将${title}添加到收藏`);
      }
    }
  }

</script>

<style lang="scss">

</style>
